<template>
  <el-container>
    <div class="header">
      <div class="title">苏小课直播教学平台</div>
      <div class="user-info">
        <div class="notification">
          <i class="bell-icon">🔔</i>
          <span class="badge">1</span>
        </div>
        <div class="user">您好，{{ userStore.uname }}！</div>
        <div class="actions">
          <a href="./login.html">退出</a>
        </div>
      </div>
    </div>
    <el-header>
      <div class="breadcrumb-nav">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item @click='navigateTo("teacherHome/home.html")'>首页</el-breadcrumb-item>
          <el-breadcrumb-item>我的课程</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-header>

    <el-main>
      <div class="content-wrapper">
        <el-input
          v-model="searchQuery"
          placeholder="请输入课程名称"
          clearable
          class="search-box"
          @input="filterCourses"
        />
        <el-button type="primary">搜索课程</el-button>
        <el-button v-if="userStore.identity === '教师'" type="primary" @click="navigateTo('addCourse/addCourse.html')">新建课程</el-button>

        <div class="course-list">
          <div
            class="course-card"
            v-for="course in filteredCourses"
            :key="course.id"
          >
            <el-image src="../../../images/course.jpg" fit="cover" class="course-image" />
            <div class="course-details">
              <div class="course-info">
                <h3>{{ course.name }}</h3>
                <p>授课老师: {{ course.teacher }}</p>
                <p>{{ course.startTime }} 至 {{ course.endTime }}</p>
                <p>共{{course.duration}}学时</p>
                <p>{{ course.description }}</p>
              </div>
              <div class="course-icons">
                <el-image
                  src="../../../images/class-min.png"
                  fit="contain"
                  class="icon large-icon"
                  @click='navigateTo("classDetail/classDetail.html")'
                />
                <el-image
                  src="../../../images/outline-min.png"
                  fit="contain"
                  class="icon large-icon"
                />
                <el-image
                  src="../../../images/task-min.png"
                  fit="contain"
                  class="icon large-icon"
                />
                <el-image
                  src="../../../images/homework-min.png"
                  fit="contain"
                  class="icon large-icon"
                />
                <el-image
                  src="../../../images/resource-min.png"
                  fit="contain"
                  class="icon large-icon"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script setup>
import { useUserStore } from "../../store/user.js";
let userStore = useUserStore();
userStore.storeInit();

import axios from 'axios';
import "../../../public/header.css";

import { ref, computed } from "vue";

const searchQuery = ref("");
let courses = ref([
  {
    id: 1,
    name: "基础会计",
    teacher: "Elysia",
    startTime: "2021-02-20",
    endTime: "2021-07-20",
    duration:"36",
    description: "本课程介绍会计的基础知识...",
  },
  // 其他课程信息
]);

const filteredCourses = computed(() => {
  if (!searchQuery.value) {
    return courses.value;
  }
  return courses.value.filter((course) =>
    course.name.toLowerCase().includes(searchQuery.value.toLowerCase())
  );
});

const filterCourses = () => {
  // 触发重新计算 filteredCourses
};

function getCourses(){
  axios({
    url: "http://localhost:9090/courses",
    method: "Get",
  })
    .then((response) => {
      // console.log(response);
      // 可在此添加成功后提示
      courses.value = response.data;
    })
    .catch((error) => {
      console.log(error);
      // 可在此添加失败后提示
    });
}
getCourses();


function navigateTo(page) {
  window.location.href = `/src/pages/${page}`;
}
</script>

<style scoped>
#app {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  padding: 20px;
}

.el-header {
  background-color: #fff;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.top-nav {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.breadcrumb-nav {
  padding: 0 20px;
}

.content-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.search-box {
  margin-right: 30px;
  width: 50%;
}

.course-list {
  display: flex;
  flex-direction: column;
  margin-top:30px;
  gap: 20px;
}

.course-card {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}

.course-image {
  width: 200px;
  height: 150px;
}

.course-details {
  padding:0 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

.course-info {
  margin-bottom: 10px;
}

.course-info h3 {
  margin: 0;
}

.course-icons {
  display: flex;
  justify-content: space-between;
}

.course-icons .icon {
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.course-icons .large-icon {
  width: 60px;
  height: 60px;
}
</style>
